<template>
    <div>
  <h1>{{msg}}</h1> 
  <hr>
  <!-- 监听属性变化用v-model表单中 -->  <!-- 按回车键的时候add record -->
  <input type="text"  v-model="record" @keyup="addRecord($event)">
  <!-- add button -->
  <button @click="addRecord($event)">增加记录</button>
  <!-- record-list li -->
  <ul>
      <li v-for="(item,key) in listRecord">
          {{item.records}}--------------
          <button @click="removeRecord(key)">删除</button>
          </li>
  </ul>
  <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in listRecord" v-if="!item.checked">
          <input type="checkbox" v-model="item.checked" >
          {{item.records}}--------------
          <button @click="removeRecord(key)">删除</button>
          </li>
  </ul>
  <hr>
  <h2>已经完成</h2>
    <ul>
      <li v-for="(item,key) in listRecord" v-if="item.checked">
          <input type="checkbox" v-model="item.checked"  >
          {{item.records}}--------------
          <button @click="removeRecord(key)">删除</button>
          </li>
  </ul>
    </div>
</template>

<script>
import localStorage from './js/Localstorage.js'
export default {
    data(){  
        return {
            msg:'nice day',
            //初始化记录的数组
            listRecord:[],
            record:'',
            isCheck:false
        }
    },
    mounted(){
         let listArr = localStorage.get('list');
       if(listArr)
       {
           this.listRecord = listArr;
       }
   
    },
    methods:{
      
        // add record
        addRecord(e){
         console.log(this.record);
         if( e.keyCode == 13 ||e.type === "click"){
             if(this.record.length > 0 ){
                //  添加记录--加入到数组中
            this.listRecord.push({'records':this.record,'checked':this.isCheck});
            //存到本地数据库
            localStorage.set('list',this.listRecord);
            this.record = '';
             }
         }
        },
        // remove record
        removeRecord(index){
            // 从数组中删除---删除的index
            this.listRecord.splice(index,1);
            // 从本地数据库删除
            localStorage.set("list",this.listRecord);
        }
    
    }
}
</script>

<style lang="css" scoped>

</style>
